<template>
  <div class="form1">
    <input type="text" placeholder="get_name"  v-model="get_list1" class="form11"/>
    <input type="text" placeholder="url:"  v-model="get_list2"/>
    <input type="text" placeholder="headers:"  v-model="get_list3" @click="show_headers()"/>
    <input type="text" placeholder="body:"  v-model="get_list4" @click="show_body()"/>
    <input type="text" placeholder="tests:"  v-model="get_list5"/>
    <div class="button">
      <button @click="add_suspend_get()">run</button>
      <button @click="cancel()">cancel</button>
    </div>
    <el-menu class="list">
      <el-menu class="list1" v-for="(item,index) in get_name1" :key="index">
        GET&nbsp&nbsp{{item}}
        <span class="status incorrect2"  @click="appear_get_name1(index)"></span>
      </el-menu>
    </el-menu>
    <div v-show="headers" class="headers">
      <input type="text" placeholder="key:"  v-model="value1" class="headerss"/>
      <input type="text" placeholder="value:"  v-model="value1" class="headerss"/>
      <input type="text" placeholder="key:"  v-model="value1" class="headerss"/>
      <input type="text" placeholder="value:"  v-model="value1" class="headerss"/>
      <input type="text" placeholder="key:"  v-model="value1" class="headerss"/>
      <input type="text" placeholder="value:"  v-model="value1" class="headerss"/>
    </div>
    <div v-show="body" class="bodys">
    <input type="text" placeholder="key:"  v-model="value1" class="bodyss"/>
    <input type="text" placeholder="value:"  v-model="value1" class="bodyss"/>
    <input type="text" placeholder="key:"  v-model="value1" class="bodyss"/>
    <input type="text" placeholder="value:"  v-model="value1" class="bodyss"/>
    <input type="text" placeholder="key:"  v-model="value1" class="bodyss"/>
    <input type="text" placeholder="value:"  v-model="value1" class="bodyss"/>
  </div>
  </div>
</template>

<script>

import E from 'wangeditor';
import request from "@/utils/request";
let editor;

export default {
  name: 'Get',
  components: {
    add: function() {
      this.get_name1.push(this.list1);
    }
  },
  data() {
    return {
      form: {},
      get_name1: ['231', '22'],
      list1: this.get_list1,
      search:'',
      currentPage4: 1,
      pageSize: 10,
      total:0,
      dialogVisible:false,
      tableData: [],
      detail:{},
      vis:false,
      headers:false,
      body:false,
      get_list1:'',
      get_list2:'',
      get_list3:'',
      get_list4:'',
      get_list5:''
    }
  },
  created() {
    this.load();
    // this.$router.push({
    //   path: '/aside',
    //   query: {get_list1: ''}
    // });
  },
  mounted() {

  },
  methods:{

    show_headers(){
      // var x = prompt("请输入：", "tom");
      // alert(x)
      this.headers = !this.headers;
    },
    show_body(){
      // var x = prompt("请输入：", "tom");
      // alert(x)
      this.body = !this.body;
    },
    load(){
      request.get("/api/get",{
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res =>{
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },

    creatDom(){
      editor = new E('#div1');//富文本编辑器创建，获取节点
      // 配置 server 接口地址
      editor.config.uploadImgServer = 'http://localhost:9090/files/editor/upload';
      editor.config.uploadFileName = 'file';//设置文件上传的名字
      editor.create();//创建。
    },

    add(){
      this.dialogVisible = true;
      this.form = {};
      //由于只有在弹窗启动之后，div节点才会被创建，那么创建富文本编辑器也只能在其之后。
      this.$nextTick(()=>{
        if (editor==null){
          this.creatDom();
        }else {
          editor.destroy();//这里做了一次判断，判断编辑器是否被创建，如果创建了就先销毁。
          this.creatDom();
        }
      });
    },
    save(){
      this.form.content = editor.txt.html();//获取富文本编辑器中的值，放到form中


      if (this.form.id){//更新
        request.put("/api/news",this.form).then(res =>{
          console.log(res);
          if (res.code==='0'){
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();//刷新表格数据
          this.dialogVisible = false;//关闭弹窗
        });
      }else {//新增
        let userStr = sessionStorage.getItem("user") ||'{}';
        let user = JSON.parse(userStr);
        this.form.author = user.nickName;//赋值

        request.post("/api/news",this.form).then(res =>{
          console.log(res);
          if (res.code==='0'){
            this.$message({
              type: "success",
              message: "新增成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();//刷新表格数据
          this.dialogVisible = false;//关闭弹窗
        });
      }

    },
    handleEdit(row){
      this.form = JSON.parse((JSON.stringify(row)));
      this.dialogVisible = true;
      this.$nextTick(()=>{
        if (editor==null){
          this.creatDom();
          editor.txt.html(row.content);
        }else {
          editor.destroy();//这里做了一次判断，判断编辑器是否被创建，如果创建了就先销毁。
          this.creatDom();
          editor.txt.html(row.content);
        }
      });
    },
    handleSizeChange(pageSize){//改变当前页面个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){//改变当前页码
      this.currentPage4 = pageNum;
      this.load();
    },
    handleDelete(id){
      console.log(id);
      request.delete("/api/news/"+id).then(res => {
        if (res.code==='0'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()//重新加载
      });
    },

    filesUploadSuccess(res){
      console.log(res);
      this.form.cover = res.data;
      this.load();
    },
    details(row){
      this.detail = row;
      this.vis = true;
    },
    run(){
      // return this.get_list1;
      console.log(this.get_list1);
      // this.get_name1.push(this.get_list1);
      this.get_list1 = '';
    },
    cancel(){
      this.get_list1 = '';
      this.get_list2 = '';
      this.get_list3 = '';
      this.get_list4 = '';
      this.get_list5 = '';
    },
    appear_get_name1(index) {
      this.get_name1.splice(index, 1)
    },
    add_suspend_get() {
      this.get_name1.push(this.get_list1);
      this.get_list1 = '';
      this.get_list2 = '';
      this.get_list3 = '';
      this.get_list4 = '';
      this.get_list5 = '';
      // this.$refs['form'].validate((valid) => {
      //   if (valid) {
      //     request.post("/api/get", this.form).then(res => {
      //       console.log(res)
      //     })
      //     console.log("res.date"+res.data)
      //     sessionStorage.setItem("get",JSON.stringify(res.data));
      //   }
      // })
      this.$router.push("/Result");
    }

  }
}
</script>
<style>
.form1 {
  width: 650px;
  height: 500px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(255,255,255,0.7);
  margin: 30px -20px 435px;
  padding: 30px 0 0 125px;
}
button{
  height: 50px;
  border: 1px solid #fff;
  margin: 0px 30px 0 0;
  width: 150px;
  cursor: pointer;
  background-color: #ffffff;
  /*font-family: FZShuTi;*/
  font-size: 17px;
  color: #6b6b7a;
}
ul,
li {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /*font-size: 25px;*/
}
/*#home {*/
/*  width: 100vw;*/
/*  height: 100vh;*/
/*  background: url("../assets/view2.jpg") no-repeat;*/
/*  background-size: cover;*/
/*  background-position: left;*/
/*  overflow: hidden;*/
/*  opacity:0.8;*/
/*  !*font-family: FZShuTi;*!*/
/*  font-size: 35px;*/
/*}*/
/*.incorrect2:before {*/
/*  content: '\2716';*/
/*  color: #c9c1c1;*/
/*  float: right;*/
/*  margin: 0 13px 0 190px;*/
/*}*/
.headers{
  height: 247px;
  width: 400px;
  background-color: #ffffff;
  position: absolute;
  /*padding: 16px 0 0 16px;*/
  top: 240px;
}
.headerss{
  width: 200px;
  margin-bottom: 0;
}
.bodys{
  height: 247px;
  width: 400px;
  background-color: #ffffff;
  position: absolute;
  /*padding: 16px 0 0 16px;*/
  top: 320px;
}
.bodyss{
  width: 200px;
  margin-bottom: 0;
}
button:active{
  background-color: lightblue;
  color: #ffffff;
}

.title:active ~ .lt-menu {
  display: block;
}

input {
  height: 50px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px 1px #abc1c7;
  margin-bottom: 30px;
  width: 400px;
  /*font-family: FZShuTi;*/
  font-size: 17px;
}

.form div{
  display: flex;
  align-items: center;
  justify-content: space-between;/*弹性布局*/
}


.list1{
  width: 195px;
  height: 45px;
  /* border-color: #cecec9; */
  margin: 0px 0 0 0;
  font-size: 20px;
  /* float: right; */
  background-color: rgba(255,255,255,0.7);
  padding: 11px 0 0 15px;
  font-size: 17px;
  /* font-style: inherit; */
  color: #afafbb;
}
.incorrect2:before {
  content: '\2716';
  color: #c9c1c1;
  float: right;
  margin: -27px 13px 0 190px;
}
.list {
  float: right;
  width: 230px;
  height: 500px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-45%,-55%);
  background-color: rgba(255,255,255,0.7);
  margin: 23px 0px 0px 481px;
  padding: 30px 0 0 20px;
}
</style>
